<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<!-- import CSS -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="./1.css">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="content">
			<div class="content-box">
				<div class="content-box-herad">量化计算</div>
				<div class="content-box-st">
					<div class="content-box-st-left" style="overflow: hidden;">
						<el-menu default-active="一" class="el-menu-vertical-demo" @select="handleOpen"
							background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" default-openeds="1">
							<el-submenu index="1" unique-opened="true" >
								<template slot="title">
									<i class="el-icon-location"></i>
									<span>量化分计算</span>
								</template>
								<el-menu-item-group>
									<el-menu-item v-for="item in array" :key="item.id"
										:index="item">第{{item}}组</el-menu-item>
								</el-menu-item-group>

							</el-submenu>
							<el-menu-item index="2">
								<i class="el-icon-menu"></i>
								<span slot="title"><a href="./calltheroll.html">随机点名</a></span>
							</el-menu-item>
							<el-menu-item index="3">
								<i class="el-icon-menu"></i>
								<span slot="title">导航三</span>
							</el-menu-item>
							<el-menu-item index="4">
								<i class="el-icon-menu"></i>
								<span slot="title">导航四</span>
							</el-menu-item>
						</el-menu>
					</div>
					<!-- 表格 -->
					<div class="content-boxlst-right" v-if="xr!==null">
						<el-table :data="xr" style="width: 100%">
							<el-table-column label="id" width="300" align="center">
								<template slot-scope="scope">
									<i class="el-icon-time"></i>
									<span style="margin-left: 10px">{{ scope.row.id }}</span>
								</template>
							</el-table-column>
							<el-table-column label="姓名" width="300" align="center">
								<template slot-scope="scope">
									<el-popover trigger="hover" placement="top">
										<p style="text-align: center;">姓名: {{ scope.row.name }}</p>
										<div slot="reference" class="name-wrapper">
											<el-tag size="medium">{{ scope.row.name }}</el-tag>
										</div>
									</el-popover>
								</template>
							</el-table-column>
							<el-table-column label="量化分" width="300" align="center">
								<template slot-scope="scope">
									<button v-on:click="funjian(scope.$index)">—</button>
									<span>{{ scope.row.fs}}</span>
									<button v-on:click="funjia(scope.$index)">+</button>
								</template>
							</el-table-column>
							<el-table-column label="操作" align="center">
								<template slot-scope="scope">
									<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
									<el-button size="mini" type="danger"
										@click="handleDelete(scope.$index, scope.row)">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
						<!-- 表格结束 -->
						<div class="sjdb">
							<el-button disabled>小组量化平均分:{{pjf}}</el-button>
							<el-button disabled>小组总分:{{zf}}</el-button>
						</div>
						<!-- 弹出窗 -->
						<el-drawer title="修改信息" :visible.sync="tcdk" direction="btt" class="tanchuang">
							<div><span>姓名:</span> <el-input placeholder="请输入内容" v-model="nameinput"
									clearable></el-input>
							</div>
							<div><span>id:</span> <el-input placeholder="请输入内容" v-model="idinput" disabled></el-input>
							</div>
							<div><span>量化分: </span><el-input placeholder="请输入内容" v-model="lhinput" clearable></el-input>
							</div>
							<div> <el-button type="success" style="width: 30%; margin: auto;"
									v-on:click="cgfun">确认修改</el-button></div>
						</el-drawer>
						<!-- 小组成员添加 -->
						<div style="margin-top: 50px; text-align: center;">
							<el-button type="success" style="width: 50%; margin:auto;"
								v-on:click="addfun">添加成员</el-button>
						</div>
						<!-- 添加成员弹出窗 -->
						<el-drawer title="添加成员" :visible.sync="tcdkx" direction="btt" class="tanchuang">
							<div><span>姓名:</span> <el-input placeholder="请输入内容" v-model="nameinput"
									clearable></el-input>
							</div>
							<div><span>id:</span> <el-input placeholder="请输入内容" v-model="idinput" disabled></el-input>
							</div>
							<div><span>量化分: </span><el-input placeholder="请输入内容" v-model="lhinput" clearable></el-input>
							</div>
							<div> <el-button type="success" style="width: 30%; margin: auto;"
									v-on:click="tjfun">确认添加</el-button></div>
						</el-drawer>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
	new Vue({
		el: '#app',
		data: function () {
			return {
				title: 'Hello',
				tableData: {
					"一": [{
						"id": 1,
						"name": "陶冶",
						"fs": 0
					},
					{
						"id": 2,
						"name": "马琛财",
						"fs": 0
					},
					{
						"id": 3,
						"name": "冯哲鸣",
						"fs": 0
					},
					{
						"id": 4,
						"name": "朱向超",
						"fs": 0
					},
					{
						"id": 5,
						"name": "曹子峥",
						"fs": 0
					},
					{
						"id": 6,
						"name": "余孟超",
						"fs": 0
					}
					],
					"二": [{
						"id": 1,
						"name": "徐泽亚",
						"fs": 0
					},
					{
						"id": 2,
						"name": "张煜林",
						"fs": 0
					},
					{
						"id": 3,
						"name": "高佳菲",
						"fs": 0
					},
					{
						"id": 4,
						"name": "张海铭",
						"fs": 0
					},
					{
						"id": 5,
						"name": "高瑜",
						"fs": 0
					},
					{
						"id": 6,
						"name": "刘沛文",
						"fs": 0
					}
					],
					"三": [{
						"id": 1,
						"name": "邵译萱",
						"fs": 0
					},
					{
						"id": 2,
						"name": "何飞阳",
						"fs": 0
					},
					{
						"id": 3,
						"name": "徐文浩",
						"fs": 0
					},
					{
						"id": 4,
						"name": "杨子萱",
						"fs": 0
					},
					{
						"id": 5,
						"name": "朱琳",
						"fs": 0
					},
					{
						"id": 6,
						"name": "寇昕冉",
						"fs": 0
					}
					],
					"四": [{
						"id": 1,
						"name": "魏瑞欣",
						"fs": 0
					},
					{
						"id": 2,
						"name": "贾子旭",
						"fs": 0
					},
					{
						"id": 3,
						"name": "曹子嵘",
						"fs": 0
					},
					{
						"id": 4,
						"name": "万曜嘉",
						"fs": 0
					},
					{
						"id": 5,
						"name": "魏子云",
						"fs": 0
					},
					{
						"id": 6,
						"name": "张宇航",
						"fs": 0
					}
					],
					"五": [{
						"id": 1,
						"name": "郭明轩",
						"fs": 0
					},
					{
						"id": 2,
						"name": "刘茗璐",
						"fs": 0
					},
					{
						"id": 3,
						"name": "庞柏霖",
						"fs": 0
					},
					{
						"id": 4,
						"name": "孙江源",
						"fs": 0
					},
					{
						"id": 5,
						"name": "孙渝森",
						"fs": 0
					},
					{
						"id": 6,
						"name": "桂昭阳",
						"fs": 0
					}
					],
					"六": [{
						"id": 1,
						"name": "程思佳",
						"fs": 0
					},
					{
						"id": 2,
						"name": "高博翔",
						"fs": 0
					},
					{
						"id": 3,
						"name": "李泽润",
						"fs": 0
					},
					{
						"id": 4,
						"name": "郑茹心",
						"fs": 0
					},
					{
						"id": 5,
						"name": "马屹良",
						"fs": 0
					},
					{
						"id": 6,
						"name": "黄兆雯",
						"fs": 0
					}
					],
					"七": [{
						"id": 1,
						"name": "贾霖灿",
						"fs": 0
					},
					{
						"id": 2,
						"name": "周静雅",
						"fs": 0
					},
					{
						"id": 3,
						"name": "于卓琦",
						"fs": 0
					},
					{
						"id": 4,
						"name": "刘哲豪",
						"fs": 0
					},
					{
						"id": 5,
						"name": "耿涵婧",
						"fs": 0
					},
					{
						"id": 6,
						"name": "邵欣悦",
						"fs": 0
					}
					],
					"八": [{
						"id": 1,
						"name": "陆怡霏",
						"fs": 0
					},
					{
						"id": 2,
						"name": "高孟涵",
						"fs": 0
					},
					{
						"id": 3,
						"name": "付子赫",
						"fs": 0
					},
					{
						"id": 4,
						"name": "高源",
						"fs": 0
					},
					{
						"id": 5,
						"name": "王星豪",
						"fs": 0
					},
					{
						"id": 6,
						"name": "范森",
						"fs": 0
					}
					],
					"九": [{
						"id": 1,
						"name": "张婷",
						"fs": 0
					},
					{
						"id": 2,
						"name": "李佳乐",
						"fs": 0
					},
					{
						"id": 3,
						"name": "陈思宇",
						"fs": 0
					},
					{
						"id": 4,
						"name": "王子涵",
						"fs": 0
					},
					{
						"id": 5,
						"name": "张晓伟",
						"fs": 0
					},
					{
						"id": 6,
						"name": "陈俊宇",
						"fs": 0
					}
					],
					"十": [{
						"id": 1,
						"name": "杨子婷",
						"fs": 0
					},
					{
						"id": 2,
						"name": "李思琪",
						"fs": 0
					},
					{
						"id": 3,
						"name": "李嘉熙",
						"fs": 0
					},
					{
						"id": 4,
						"name": "李浩宇",
						"fs": 0
					},
					{
						"id": 5,
						"name": "王煜",
						"fs": 0
					},
					{
						"id": 6,
						"name": "陈梓涵",
						"fs": 0
					}
					],
					"十一": [{
						"id": 1,
						"name": "王思琪",
						"fs": 0
					},
					{
						"id": 2,
						"name": "李佳怡",
						"fs": 0
					},
					{
						"id": 3,
						"name": "刘婧怡",
						"fs": 0
					},
					{
						"id": 4,
						"name": "刘瀚阳",
						"fs": 0
					},
					{
						"id": 5,
						"name": "孙靖涵",
						"fs": 0
					},
					{
						"id": 6,
						"name": "王嘉诚",
						"fs": 0
					}
					],
					"十二": [{
						"id": 1,
						"name": "曹梓涵",
						"fs": 0
					},
					{
						"id": 2,
						"name": "李梓涵",
						"fs": 0
					},
					{
						"id": 3,
						"name": "赵梓涵",
						"fs": 0
					},
					{
						"id": 4,
						"name": "王梓涵",
						"fs": 0
					},
					{
						"id": 5,
						"name": "张梓涵",
						"fs": 0
					},
					{
						"id": 6,
						"name": "陈梓涵",
						"fs": 0
					}
					]
				},
				array: [],
				xr: null,
				// 标记本地有没有数据
				getst: null,
				// 平均分
				pjf: null,
				// 总分
				zf: null,
				// 弹窗的打开
				tcdk: false,
				// 姓名输入框
				nameinput: "",
				// id输入框
				idinput: "",
				// 量化分数
				lhinput: "",
				// 添加弹出
				tcdkx: false
			}
		},
		methods: {
			handleOpen(key) {
				// 点击的事子菜单
				let arraykey = this.array.find((value) => {
					return value == key
				})
				if (arraykey) {
					this.xr = this.getst[arraykey]
					console.log(this.xr)
					this.pjffun(this.xr)
				}
			},
			// 计算平均分
			pjffun(cj) {
				var ty = 0;
				// console.log(cj)
				for (let i = 0; i < cj.length; i++) {
					ty += Number(cj[i].fs)
				}
				this.zf = ty
				this.pjf = (ty / 6).toFixed(2)
				console.log(this.pjf)
			},
			// 编辑按钮点击
			handleEdit(index, data) {
				this.tcdk = true
				this.nameinput = data.name
				this.idinput = data.id
				this.lhinput = data.fs
			},
			// 确定修改
			cgfun() {
				let xrx = this.xr.findIndex((value) => {
					return this.idinput == value.id
				})
				this.xr[xrx].name = this.nameinput;
				this.xr[xrx].fs = this.lhinput;
				// 修改成功之后保存本地
				localStorage.setItem('shuju', JSON.stringify(this.getst))
				this.pjffun(this.xr)
				this.tcdk = false

			},
			// 添加成员
			addfun() {
				this.lhinput = "";
				this.nameinput = ""
				this.tcdkx = true;
				this.idinput = this.xr.length + 1
			},
			// 确认添加
			tjfun() {
				// 现叫内容清空
				var tjobj = {};
				tjobj.fs = this.lhinput;
				tjobj.name = this.nameinput;
				tjobj.id = this.idinput;
				if (this.lhinput == "" || this.nameinput == "") {
					alert("姓名或者量化分不能为空")
				} else {
					this.xr.push(tjobj)
					// 添加后保存本地
					localStorage.setItem('shuju', JSON.stringify(this.getst))
					this.tcdkx = false;
				}
			},
			// 删除
			handleDelete(index, data) {
				this.xr.splice(index, 1)
				if (index + 1 == this.xr.length) {
					console.log('末尾不添加')
				} else {
					for (let i = index; i < this.xr.length; i++) {
						this.xr[i].id = this.xr[i].id - 1
					}
				}
				// console.log(this.xr)
				localStorage.setItem('shuju', JSON.stringify(this.getst))
			},
			// 减函数
			funjian(index){
			if(this.xr[index].fs<=0){
				this.xr[index.fs=0]
				alert('不能减啦再减就成负数啦')
			}else{
				this.xr[index].fs--
			}
			localStorage.setItem('shuju', JSON.stringify(this.getst))
			},
			funjia(index){
				this.xr[index].fs++
				localStorage.setItem('shuju', JSON.stringify(this.getst))
			}
			

		},
		mounted: function () {
			// console.log(this.tableData)
			for (let i in this.tableData) {
				this.array.push(i)
			}

			// uni.setStorageSync('shuju',JSON.stringify(this.tableData))
			if (localStorage.getItem('shuju')) {
				this.getst = JSON.parse(localStorage.getItem('shuju'))
				this.xr = this.getst.一
				console.log(this.xr)
				this.pjffun(this.xr)
			}
			if (this.getst == null) {
				localStorage.setItem('shuju', JSON.stringify(this.tableData))
				// console.log(uni.getStorageSync('shuju'))
				this.getst = JSON.parse(localStorage.getItem('shuju'))
				this.xr = this.getst.一
				console.log(this.xr)
				this.pjffun(this.xr)
			}
			// localStorage.setItem('key',1)
		}

	})
</script>

</html>